<template>
	<view class="col content">
		<view class="title">
			<view>simple-slider</view>
			<view class="sub-title">竖向slider，简单好用，更多自定义配置可以修改源码</view>
		</view>
		<view class="row exp">
			<view class="col des">
				设置步长
				<view>step=20</view>
				<view>value={{ val1 }}</view>
			</view>
			<view class="col slider-container"><s-slider v-model="val1" size="220" :step="20" sizeUnit="rpx" @changing="changing" @changed="changed" /></view>
		</view>
		<view class="row exp">
			<view class="col des">
				小数区间（适合做音量调整）
				<view>min=0.2</view>
				<view>max=1</view>
				<view>step=0.2</view>
				<view>value={{ val2 }}</view>
			</view>
			<view class="col slider-container"><s-slider v-model="val2" :min="0.2" :max="1" :step="0.2" size="220" sizeUnit="rpx" @changing="changing" @changed="changed" /></view>
		</view>

		<view class="row exp">
			<view class="col des">
				颜色样式
				<view>value={{ val3 }}</view>
			</view>
			<view class="col slider-container">
				<s-slider v-model="val3" size="220" sizeUnit="rpx" backgroundColor="#d1d100" activeColor="#2a86cc" blockColor="#00aa00" @changing="changing" @changed="changed" />
			</view>
		</view>
	</view>
</template>

<script>
import sSlider from '@/components/simple-slider/simple-slider.vue';
export default {
	components: {
		sSlider
	},
	data() {
		return {
			val1: 0,
			val2: 0.5,
			val3: 30
		};
	},
	onLoad() {},
	methods: {
		changing(e) {
			// console.log('changing', e);
		},
		changed(e) {
			// console.log('changed', e);
		}
	}
};
</script>

<style>
.row {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content {
}

.title {
	width: 100%;
	font-size: 24px;
	padding: 20px 0;
	background: #ebebeb;
	text-align: center;
}
.sub-title {
	font-size: 14px;
	color: #a5a5a5;
}
.exp {
	width: 600rpx;
	margin-top: 20px;
	padding-bottom: 10px;
	justify-content: center;
	border-bottom: 1px solid #e9e9e9;
}

.des {
	width: 300rpx;
	margin-right: 100rpx;
	align-items: flex-start;
	color: #a5a5a5;
	font-size: 12px;
}
.des view {
	color: #000;
	font-size: 16px;
}
.slider-container {
	width: 60rpx;
	height: 280rpx;
	justify-content: center;
	box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, 0.2);
	border-radius: 15rpx;
}
</style>
